import { Divider, Flex, Skeleton, Tag, Typography } from "antd";
import { formatNumberToWan } from "../Common/commonData";
import styles from "./ThirtySixKrCard.module.css";
import { useUser } from "@/hook/useUser/useUser";
import { TABS, TOP_THREE } from "./ThirtySixKrData";
import ProxyImage from "../Common/ProxyImage/ProxyImage";
const { Text, Title, Paragraph } = Typography;

export function ThirtySixKrCard({ item = {}, style = {}, tab = "webNews" }) {
  const { openInNewWindow, listDisplay } = useUser();
  const target = openInNewWindow ? "_blank" : "_self";
  const isImageEnabled = listDisplay === 0 ? true : false;

  // 根据tab类型获取右侧显示数据
  const getRightContent = () => {
    const commonStyle = { margin: 0, fontSize: 12, color: "#666" };

    switch (tab) {
      case TABS.webNews:
        return (
          <Flex align="center" gap={4}>
            <Text type="secondary" style={commonStyle}>
              {item?.extra_content?.created_at}
            </Text>
          </Flex>
        );
      case TABS.hotRenQi:
        return (
          <Flex align="center" gap={4}>
            <Text strong style={{ color: "#ff4d4f" }}>
              {formatNumberToWan(item.extra_content?.hot)}
            </Text>
            <Text type="secondary" style={commonStyle}>
              热度
            </Text>
          </Flex>
        );
      case TABS.hotZongHe:
      case TABS.hotShouCang:
        return (
          <Flex align="center" gap={4}>
            <Text strong style={{ color: "#ff4d4f" }}>
              {formatNumberToWan(item?.extra_content?.bookmarks)}
            </Text>
            <Text type="secondary" style={commonStyle}>
              收藏
            </Text>
          </Flex>
        );
      default:
        return null;
    }
  };

  return (
    <>
      <Flex
        gap={12}
        style={{
          backgroundColor: "white",
          boxShadow: "rgba(0, 0, 0, 0.1) 0px 1px 3px 0px",
          overflow: "hidden",
          padding: "12px",
          ...style,
        }}>
        {isImageEnabled && (
          <div
            style={{
              position: "relative",
              margin: 0,
              background: "#f5f5f5",
            }}>
            {/* 主图片链接 */}
            <a
              href={item.url}
              target={target}
              style={{
                display: "block",
                textDecoration: "none",
                color: "inherit",
              }}>
              <ProxyImage
                originalUrl={item?.extra_content?.photo_url}
                style={{
                  height: "108.9px",
                  width: "185.9px",
                  objectFit: "cover",
                }}
              />
            </a>

            {/* 关键词标签 - 改为独立链接 */}
            {tab === TABS.webNews && item.extra_content.keywords && (
              <a
                href={item.extra_content?.keywords[0].url}
                target={target}
                style={{
                  position: "absolute",
                  top: 8,
                  left: 8,
                  border: "1px solid #fff",
                  color: "#fff",
                  backgroundColor: "#373737",
                  textAlign: "center",
                  padding: "0 8px",
                  height: "20px",
                  lineHeight: "20px",
                  fontSize: "13px",
                  zIndex: 1, // 确保在图片上方
                }}>
                {item.extra_content?.keywords[0].name}
              </a>
            )}

            {/* 排名图标 */}
            {tab !== TABS.webNews && [1, 2, 3].includes(item.order) && (
              <ProxyImage
                originalUrl={TOP_THREE[item.order] || null}
                style={{
                  position: "absolute",
                  top: "-.6rem",
                  left: "-.6rem",
                  width: "60px",
                  height: "38px",
                  zIndex: 1,
                }}
              />
            )}
          </div>
        )}

        <Flex flex={1} justify="space-between" vertical>
          {/* 内容区域链接 */}
          <a
            className={styles["content-link"]}
            target={target}
            href={item.url}
            style={{ textDecoration: "none", color: "inherit" }}>
            {/* 标题 */}
            <Title
              key={item.url}
              level={5}
              ellipsis={{ rows: 2 }}
              className={styles["title"]}>
              {item.title}
            </Title>

            {/* 简介 */}
            <Paragraph
              ellipsis={{ rows: 2 }}
              style={{
                margin: 0,
                fontSize: 13,
                color: "#666",
              }}>
              {item?.extra_content?.intro}
            </Paragraph>
          </a>

          {/* 底部元信息 */}
          <Flex justify="space-between" align="center" wrap="wrap" gap={8}>
            <Flex gap={8} wrap="wrap" style={{ margin: 0, fontSize: 12 }}>
              {/* 主题标签 */}
              {tab === "webNews" && item?.extra_content?.themes?.[0] && (
                <Tag>
                  <a
                    href={item.extra_content.themes[0].url}
                    target={target}
                    rel="noopener noreferrer"
                    style={{ color: "inherit" }}>
                    {item.extra_content.themes[0].name}
                  </a>
                </Tag>
              )}

              {/* 作者信息 */}
              {item?.extra_content?.authors?.[0] && (
                <Text style={{ margin: 0 }} type="secondary">
                  <a
                    href={item.extra_content.authors[0].url}
                    target={target}
                    rel="noopener noreferrer"
                    style={{ color: "inherit" }}>
                    作者: {item.extra_content.authors[0].name}
                  </a>
                </Text>
              )}
            </Flex>

            {/* 右侧数据 */}
            {getRightContent()}
          </Flex>
        </Flex>
      </Flex>
      <Divider style={{ margin: "0" }} />
    </>
  );
}
